{extend name="index/index" /}
{block name="title"}<title>{$data['title']}</title>{/block}
{block name="mycss"}
{css href="__CSS__info.css"}
{/block}
{block name="name"}
<div data-v-0c52ff9e="" data-v-5af8a57f="" class="card-note pc-container need-margin"><!---->
    <div data-v-0c52ff9e="" class="left-card"><!---->
        <div data-v-2f813510="" data-v-0c52ff9e="" class="bottom-gap">
            <div data-v-2f813510="" class="carousel" style="width: 500px; height: 500px;">
                <!-- 显示的大图 -->
                <ul data-v-2f813510="" class="slide">
                    <!-- 封面图 -->
                    <li data-v-2f813510="" style="width: 500px; height: 500px;">
                        <span data-v-2f813510="" class="inner"
                              style="background-image: url('/static/uploads/img/{$data["thumb"]}');"></span>
                    </li>
                    <!--                    其他图片-->
                    {volist name="data['img']" id="v"}
                    <li data-v-2f813510="" style="width: 500px; height: 500px; display: none;">
                        <span data-v-2f813510="" class="inner"
                              style="background-image: url('/static/uploads/img/{$v}');"></span>
                    </li>
                    {/volist}
                </ul>
                <div data-v-2f813510="" class="change-pic">
                    <span data-v-2f813510="" class="left"></span>
                    <span data-v-2f813510="" class="right"></span>
                </div>
                <div data-v-2f813510="" class="pages" style="display: none;">
                    <span data-v-2f813510="">1</span>
                    <i data-v-2f813510="">/</i>
                    <span data-v-2f813510="">9</span>
                </div>
            </div>
            <!-- 略缩图 -->
            <div data-v-2f813510="" class="small-pic" style="width: 500px;">
                <div data-v-2f813510="" class="each active">
                    <i data-v-2f813510="" class="img" style="background-image: url('/static/uploads/img/{$data["thumb"]}');"></i>
                </div>
                {volist name="data['img']" id="v"}
                <div data-v-2f813510="" class="each">
                    <i data-v-2f813510="" class="img" style="background-image: url('/static/uploads/img/{$v}');"></i>
                </div>
                {/volist}
            </div>
        </div>

        <!--        内容区域-->
        <div data-v-0c52ff9e="" class="note-top">
            <h1 data-v-0698d22a="" data-v-0c52ff9e="" class="title">{$data['title']}</h1>
            <div data-v-0c52ff9e="" class="related-tags"></div>
        </div>
        <div data-v-0c52ff9e="">
            <div data-v-5806d7a1="" class="content">
                <p data-v-5806d7a1="">{$data['content']}</p>
            </div>
        </div>
        <div data-v-0c52ff9e=""></div>
        <div data-v-066c53a5="" data-v-0c52ff9e="" class="tags bottom-gap-add">
            <div data-v-066c53a5="" class="operation-block">
                <span data-v-066c53a5="" class="like"><i data-v-066c53a5=""></i><span
                        data-v-066c53a5="">{$data['praise']}</span></span>
                <span data-v-066c53a5="" class="comment"><i data-v-066c53a5=""></i><span
                        data-v-066c53a5="">{$totalComment}</span></span>
                <span data-v-066c53a5="" class="star"><i data-v-066c53a5=""></i><span
                        data-v-066c53a5="">{$data['collection']}</span></span>
            </div>
            <div data-v-066c53a5="" class="publish-date"><span data-v-066c53a5="">发布于 {$data['create_at']}</span>
                <!----></div>
        </div>
        <!--        评论区-->
        <div data-v-47a76efb="" data-v-0c52ff9e="" class="all-tip">
            <h3 data-v-47a76efb="" class="top">
                <i data-v-47a76efb="" class="remain"></i>
                <span data-v-47a76efb="" class="brief">笔记评论</span>
                <button class="btn btn-success write">写评论</button>
            </h3>
            {if condition="!empty($comment)"}
            {volist name="comment" id="v"}
            <div data-v-47a76efb="" class="content">
                <div data-v-27f0905e="" data-v-47a76efb="" class="comment">
                    <div data-v-27f0905e="" class="comment-info">
                        <div data-v-27f0905e="" class="user">
                            <div data-v-75384e20="" data-v-27f0905e="" class="avatar avatar avatar-XS type-outline">
                                <div data-v-421ec10c="" data-v-75384e20="" class="avatar-img cube-image normal-image">
                                    <!--                                    评论用户头像-->
                                    <img data-v-421ec10c="" alt="{$v['nickname']}"
                                         src="{$data['image']}"
                                         class="border-img" width="50" height="50" >
                                </div>
                            </div>
                            <div data-v-27f0905e="" class="user-info">
                                <h4 data-v-27f0905e="" class="user-nickname">
                                    <a data-v-27f0905e="" href="{:url('index/User/visitor',['id' => $v['uid']])}">
                                        {if condition="$v['nickname'] == null"}
                                        用户{$v['voucher']}
                                        {else /}
                                        {$v['nickname']}
                                        {/if}
                                    </a>
                                </h4>
                                <span data-v-27f0905e="" class="publish-time">{$v['comment_at']}</span></div>
                        </div>
                        <div data-v-27f0905e="" class="comment-stats">
                            {if condition="$v['uid'] == session('data.id')"}
                            <span data-v-27f0905e="" class="del-action" data-id="{$v['id']}">删除</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            {/if}

                            <span data-v-27f0905e="" class="reply-action" data-id="{$v['id']}" user-id="{:session('data.id')}">回复</span>
                        </div>
                    </div>
                    <!--                    评论-->
                    <p data-v-cfc9ad70="" data-v-27f0905e="" class="content">{$v['comment']}</p> <!---->
                    {if condition="empty($v['response'])"}
                    <div data-v-27f0905e="" class="replies" style="display: none;">
                        <div data-v-08820946="" data-v-47a76efb="" class="reply" data-v-27f0905e=""
                             style="float: none;margin: 0;">
                            <span data-v-08820946="" class="replier">13245</span>
                            <p data-v-cfc9ad70="" data-v-08820946="" class="reply-content">1234</p>
                        </div>
                    </div>
                    {else /}
                    {assign name="rname" value=":explode(',',$v['uname'])" /}
                    {foreach :explode(',',$v['response']) as $k => $val}
                    <div data-v-27f0905e="" class="replies">
                        <div data-v-08820946="" data-v-47a76efb="" class="reply" data-v-27f0905e=""
                             style="float: none;margin: 0;">
                            <span data-v-08820946="" class="replier">{$rname[$k]} : </span>
                            <p data-v-cfc9ad70="" data-v-08820946="" class="reply-content">{$val}</p>
                        </div>
                    </div>
                    {/foreach}
                    {/if}
                </div>
            </div>
            {/volist}
            {else /}
            <!--            没有评论-->
            <div data-v-47a76efb="" class="nocomment">
                <img data-v-47a76efb="" src="//s.xiaohongshu.com/formula-static/frieza/public/img/elephant.207c437.png"
                     class="smallpic">
                <h3 data-v-47a76efb="" class="remain">啊欧，还没有评论哦～
                </h3>
            </div>
            {/if}
        </div>
        <div class="form-group writeComment" style="display:none;">
            <textarea class="form-control" id="comment" rows="5" cols="20" name="comment"></textarea>
            <h5>说点什么吧，你可以输入<span>200</span>个字，现在剩余<span id="word">200</span>个</h5>
            <br>
            <button class="btn btn-blue-3 doComment" data-id="{$data['id']}">评论</button>
        </div>
        <div class="form-group writeResponse" style="display:none;">
            <textarea class="form-control" id="response" rows="5" cols="20" name="text"></textarea>
            <h5>说点什么吧，你可以输入<span>200</span>个字，现在剩余<span id="txt">200</span>个</h5>
            <br>
            <button class="btn btn-blue-3 doResponse">回复</button>
        </div>
        <div data-v-0c52ff9e=""></div>
    </div>
    <div data-v-0c52ff9e="" class="right-card">
        <div data-v-0d757e92="" data-v-0c52ff9e="" class="author-item bottom-gap">
            <h3 data-v-0d757e92="" class="title">笔记作者</h3>
            <span data-v-88058554="" data-v-0d757e92="" class="author-info">
                <div data-v-88058554="" class="left">
                    <div data-v-88058554="" class="left-img">
                    <!-- 笔记作者头像 -->
                        <a href="{:url('index/User/visitor',['id' => $data['uid']])}">
                            <img data-v-88058554=""
                             src="{$data['image']}"
                             style="width: 50px; height: 50px;">
                        <i data-v-88058554="" class="border-img" style="width: 50px; height: 50px;"></i>
                        </a>
                    </div>
                    <i data-v-88058554="" class="add-v" style="display: none;"></i>
                </div>
                <div data-v-88058554="" class="info" style="width: 190px;">
                    <h6 data-v-88058554="" class="name" style="font-size: 16px;">
                        <span data-v-88058554="" class="name-detail">{$data['nickname']}</span>
                        <i data-v-88058554="" class="level-detail"
                           style="background-image: url(&quot;//s4.xiaohongshu.com/static/throne/property/f5.png&quot;);"></i>
                    </h6>
                    <p data-v-88058554="" class="brief" style="font-size: 14px;">{$data['signature']}</p>
                </div> <!----></span>
            <div data-v-0d757e92="" class="card-info">
                <div data-v-0d757e92="" class="inner">
                    <span data-v-0d757e92="">笔记</span>
                    <span data-v-0d757e92="" class="note">{$data['note_num']}</span>
                </div>
                <div data-v-0d757e92="" class="inner">
                    <span data-v-0d757e92="">粉丝</span>
                    <span data-v-0d757e92="" class="fans">{$data['fans_num']}</span>
                </div>
                <div data-v-0d757e92="" class="inner">
                    <span data-v-0d757e92="">获赞与收藏</span>
                    <span data-v-0d757e92="" class="collect">{$data['collection_num']}</span>
                </div>
            </div>
        </div>
        <div data-v-0c52ff9e=""></div>
        <div data-v-79236b64="" data-v-0c52ff9e="" class="bottom-gap">
            <!-- 相关笔记推荐,同类型的 -->
            <div data-v-79236b64="" class="panel-card"><h3 data-v-79236b64="">相关笔记</h3>
                <div data-v-79236b64="" class="panel-list" style="max-height: 400px; overflow-y: auto;">
                    {if condition="!empty($similar)"}
                    {volist name="similar" id="val"}
                    <a data-v-79236b64="" href="{:url('index/Note/index',['id'=>$val['id']])}" owl="panel_card"
                       class="inner" data-owl-imp="true">
                        <div data-v-79236b64="" class="picture">
                            <!-- 笔记封面图 -->
                            <span data-v-79236b64="" class="photo"
                                  style="background-image: url('/static/uploads/img/{$val["thumb"]}');"></span>
                            <i data-v-79236b64="" class="normal"></i></div>
                        <div data-v-79236b64="" class="content">
                            <!-- 标题 -->
                            <p data-v-79236b64="" class="desc">{$val['title']}</p>
                        </div>
                    </a>
                    {/volist}
                    {else /}
                    暂无相关笔记推荐
                    {/if}
                </div>
            </div>
        </div>
    </div>

</div>

{js href="__JS__note.js"}
{js href="__JS__comment.js"}
{/block}
